<template>
	<div>
		<ProTable ref="proTable" title="banner列表" :columns="columns" :requestApi="RequestBannerList">
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="View" @click="openDrawer(scope.row)">查看</el-button>
				<el-button type="primary" link :icon="EditPen" @click="openDrawer(scope.row)">编辑</el-button>
				<el-button type="primary" link :icon="Refresh" @click="openDrawer(scope.row)">重置密码</el-button>
				<el-button type="primary" link :icon="Delete" @click="openDrawer(scope.row)">删除</el-button>
			</template>
		</ProTable>
	</div>
</template>

<script lang="tsx" setup>
import ProTable from '@/components/ProTable/index.vue'
import type { ColumnProps } from '@/components/ProTable/interface'
import type { Good } from '@/api/interface'
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import { api } from '@/api'
const { RequestBannerList } = api
// 表格配置项
const columns: ColumnProps<Good.Banner>[] = [
	{ type: 'selection', fixed: 'left', width: 80 },
	{ type: 'index', label: '#', width: 80 },
	{ prop: 'id', label: '序列号', width: 180 },
	{
		prop: 'url',
		label: '图片',
		width:'300px',
		// 使用 render 自定义表格内容
		render(scope) {
			return <el-image src={scope.row.url}></el-image>
		}
	},
	{ prop: 'operation', label: '操作', fixed: 'right', width: 330 }
]

const openDrawer = (row: any, title?: string) => {
	console.log(row)
}
</script>

<style lang="scss" scoped></style>
